<template>
	<div class="headershelf">
		<p v-if="user!=null">
			<label>
				{{user.name}}
				<span>
					<router-link to='/'>修改我的信息</router-link>
					<router-link to='/'>购物车</router-link>
				</span>
			</label>
			<button @click="out()">退出登录</button>
		</p>
		<p v-if="user==null">
			<router-link to="/pc/login">点击登录</router-link>
		</p>

	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: "HeaderShelf",

		computed: {
			...mapState('user', ['user'])
		},
		methods: {
			out() {
				this.selToken('')
				this.selWord(null)
				this.$router.push('/pc/home');
			}
		}
	}
</script>

<style scoped>
	.headershelf {
		width: 23%;
		height: 80px;
		border: #000000 1px solid;
		border-radius: 6px;
		display: flex;
		align-items: center;
		justify-content: space-around
	}

	.headershelf p {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around
	}

	.headershelf label {
		display: flex;
		align-items: center;
		color: #e33333;
		white-space:nowrap;
	}

	.headershelf label span {

		display: flex;
		flex-direction: column;
	}


	.headershelf p img {
		width: 20%;
		height: 50px;
	}

	.headershelf a {
		display: inline-block;
		text-align: center;
		line-height: 30px;

		color: #1e90ff;

	}

	.headershelf p button {
		border: none;
		outline: none;
		/*清除默认背景 */
		background-color: transparent;
		color: #000000;
	}

	.headershelf button:hover {
		color: #e33333;
	}
</style>